tynanpurdy.com
A personal website powered by Astro and ATProto
1---
2import Layout from '../../layouts/Layout.astro';
3import { getCollection, getEntry, render } from "astro:content";
4
5export async function getStaticPaths() {
6 const documents = await getCollection("documents");
7 return documents.map((document) => ({
8 params: { leaflet: document.id },
9 props: document,
10 }));
11}
12
13const document = await getEntry("documents", Astro.params.leaflet);
14
15if (!document) {
16 throw new Error(`Document with id "${Astro.params.leaflet}" not found`);
17}
18
19const { Content } = await render(document);
20---
21
22<Layout title={document.data.title}>
23 <div class="container mx-auto px-4 py-8">
24 <header class="mb-8">
25 <nav class="mb-6">
26 <a href="/leaflets" class="text-blue-600 dark:text-blue-400 hover:underline">
27 ← Back to Leaflets
28 </a>
29 </nav>
30
31 <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
32 {document.data.title}
33 </h1>
34
35 {document.data.description && (
36 <p class="text-xl text-gray-600 dark:text-gray-400 mb-6">
37 {document.data.description}
38 </p>
39 )}
40
41 <div class="text-sm text-gray-500 dark:text-gray-400 mb-6">
42 {document.data.publishedAt && (
43 <span>
44 {new Date(document.data.publishedAt).toLocaleDateString('en-US', {
45 year: 'numeric',
46 month: 'long',
47 day: 'numeric',
48 })}
49 </span>
50 )}
51 </div>
52 </header>
53
54 <main class="max-w-4xl mx-auto">
55 <article class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-8">
56 <Content />
57 </article>
58 </main>
59 </div>
60</Layout>